<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ol>
        <li>第一个li</li>
        <li>第2个li</li>
        <li>第3个li</li>
        <li>第4个li</li>
    </ol>
    <script>
        // 1.parentNode.firstChild 获取第一个子元素Li 同样返回所有子节点 不推荐使用 
        var ol = document.querySelector('ol')
        console.log(ol.firstChild);//text 会返回第一个子节点 所以给第一个文本换行节点取过来了
        console.log(ol.lastChild);//同上 所以此方法不推荐 因为我们总是需要操作元素节点
        // 2.推荐使用的 firstElementchild 但是ie9后才兼容
        console.log(ol.firstElementChild);//返回第一个子元素节点 找不到则返回null
        console.log(ol.lastElementChild);//返回最后一个子元素节点
        // 3.实际开发中 没有兼容性又方便返回某一个子元素节点的写法
        console.log(ol.children[2]);//利用children会返回一个子元素集合（伪数组） 然后用下标的方式指定返回某一个子元素节点
        console.log(ol.children[ol.children.length - 1]); //既然是伪数组 就可以用length属性 可以动态检测返回最后一个子元素节点
    </script>
</body>

</html>